<template>
  <div class="user-details">
    <PageTitle title="个人信息"></PageTitle>
    <div class="person-content" style="padding: 30px;">
      <el-form label-width="80px">
        <el-form-item label-width="120px">
          <el-upload
            class="avatar-uploader"
            :action="updateAvater"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="userForm.imgUrl" :src="userForm.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="userForm.sex" placeholder="请选择" style="width: 100%;">
            <el-option value="男" label="男"></el-option>
            <el-option value="女" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="userForm.age"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" type="email" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input type="tel" v-model="userForm.telephone" ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="userForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="goSave">保存</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
      <!-- <input type="file" @change="handlefile"> -->
    </div>
  </div>
</template>

<script>
import { updateUserInfo } from '@/api/user'
import { mapState } from 'vuex'
import PageTitle from '@/components/common/PageTitle.vue'
export default {
  name: 'PersonDetails',
  components: {
    PageTitle
  },
  data () {
    return {
      updateAvater: '',
      userForm: {
      }
    }
  },
  created () {
    this.userForm = this.userInfo
    console.log(this.userForm.imgUrl)
    this.updateAvater = process.env.VUE_APP_BASE_URL + '/guests/upload'
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    async handleAvatarSuccess (file) {
      this.userForm.imgUrl = file.data
      await this.$store.dispatch('user/getUserInfo')
    },
    beforeAvatarUpload () {},
    goSave () {
      this.updateUserInfo()
    },
    async updateUserInfo () {
      console.log(this.userForm.telephone, this.userForm.nickname, this.userForm.age, this.userForm.sex, this.userForm.idCard)

      await updateUserInfo(this.userForm.telephone, this.userForm.nickname, this.userForm.age, this.userForm.sex, this.userForm.idCard)
      await this.$store.dispatch('user/getUserInfo')
      this.$message({
        type: 'success',
        message: '更新成功'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-details {
  position: relative;
  margin-top: 50px;
  width: 100%;
  .person-content {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    .el-form {
      width: 350px;
    }
  }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
    border-radius: 50%;
  }
</style>
